import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { subNumberAction } from '../store/count/countSlice'

export class Profile extends PureComponent {
  render() {
    const { count,subNumber,banners,recommends} = this.props
    return (
      <div>
        profile count: {count}
        <button onClick={()=>subNumber(1)}>-1</button>
        <button onClick={()=>subNumber(5)}>-5</button>
        <ul>
          {
            banners.map((item,index)=>(
              <li key={index}>{item}</li>
            ))
          }
        </ul>
        <ul>
          {
            recommends.map((item,index)=>(
              <li key={index}>{item}</li>
            ))
          }
        </ul>
      </div>
    )
  }
}
const mapStateToProps = (state) => {
  return {
    count: state.count.count,
    banners: state.home.banners,
    recommends: state.home.recommends
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    subNumber(num){
        dispatch(subNumberAction(num))
    }
  }
}
export default  connect(mapStateToProps,mapDispatchToProps)(Profile)
